import React, { Component } from 'react'

import { Link } from 'react-router-dom';
import { Grid, Button, Modal } from 'antd-mobile';

import { BASE_URL, isAuth, API, removeToken, setUserInfo } from '../../utils';

import styles from './index.module.css';

const alert = Modal.alert

// 菜单数据
const menus = [
  { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorite' },
  { id: 2, name: '我的出租', iconfont: 'icon-ind ', to: '/rent' },
  { id: 3, name: '看房记录', iconfont: 'icon-record' },
  { id: 4, name: '成为房主', iconfont: 'icon-identity' },
  { id: 5, name: '个人资料', iconfont: 'icon-myinfo' },
  { id: 6, name: '联系我们', iconfont: 'icon-cust' }
]

// 默认头像
const DEFAULT_AVATAR = BASE_URL + '/img/profile/avatar.png'
class Profile extends Component {
  state = {
    isLogin: isAuth(),
    userInfo: {
      avatar: '',
      nickname: ''
    }
  }
  componentDidMount() {
    this.getUserInfo()
  }
  getUserInfo = async () => {
    // console.log(getToken());
    if (!this.state.isLogin) return
    const res = await API.get('/user')
    // console.log(res);
    if (res.data.status === 200) {
      const { avatar, nickname } = res.data.body
      const userInfo = {
        avatar,
        nickname
      }
      this.setState({
        userInfo
      })
      setUserInfo(userInfo)
    }else {
      // token失效
      this.setState({
        isLogin: false
      })
    }
  }
  // 退出
  logout = () => {
    alert('提示', '是否确定退出？', [
      { text: '取消'},
      { text: '确定', onPress: async () => {
        // console.log('ok');
        await API.post('/user/logout', null)
        // console.log(res);
        removeToken()

        this.setState({
          isLogin: false,
          userInfo: {
            avatar: '',
            nickname: ''
          }
        })
      } }
    ])
  }
  render() {
    const { history } = this.props
    const { isLogin, userInfo: { avatar, nickname } } = this.state
    return (
      <div className={styles.root}>
        {/* 个人信息 */}
        <div className={styles.title}>
          <img className={styles.bg} src={BASE_URL + '/img/profile/bg.png'} alt="背景图" />
          <div className={styles.info}>
            <div className={styles.myIcon}>
              <img className={styles.avatar} src={ DEFAULT_AVATAR || (BASE_URL + avatar) } alt="icon" />
            </div>
            <div className={styles.user}>
              <div className={styles.name}>{nickname || '游客'}</div>
            </div>

            {
              isLogin ? (
                // 登陆之后展示
                <>
                  <div className={styles.auth}>
                    <span onClick={this.logout} className={styles.logout}>退出</span>
                  </div>
                  <div className={styles.edit}>
                    编辑个人资料
                    <span className={styles.arrow}>
                      <i className="iconfont icon-arrow" />
                    </span>
                  </div>
                </>
              ) : (
                // 未登录展示
                <div className={styles.edit}>
                  <Button
                    type="primary"
                    size="small"
                    inline
                    onClick={() => history.push('/login')}
                  >去登录</Button>
                </div>
              )
            }
          </div>
        </div>
        <Grid
          data={menus}
          columnNum={3}
          hasLine={false}
          renderItem={item =>
            item.to ? (
              <Link to={item.to} className={styles.link}>
                <div className={styles.menuItem}>
                  <i className={`iconfont ${item.iconfont}`}></i>
                  <span>{item.name}</span>
                </div>
              </Link>
            ) : (
              <div className={styles.menuItem}>
                <i className={`iconfont ${item.iconfont}`}></i>
                <span>{item.name}</span>
              </div>
            )
          }
        />

        <div className={styles.ad}>
          <img className={styles.adImg} src={BASE_URL + '/img/profile/join.png'} alt="加入我们" />
        </div>
      </div>
    )
  }

}

export default Profile